<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    section {
      width: 800px;
      height: 700px;
      background-color: #ccc;
      margin: 0 auto;
      /* section是一个弹性盒了 */
      /* 当一个元素变成弹性盒以后，那么里面所有的子元素都默认从左往右了 */
      /* 里面所有的元素，都直接变成块状元素，所以都可以直接添加宽和高了 */
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;

      flex-wrap: wrap;
      align-content: space-evenly;
    }
    span {
      width: 100px;
      height: 100px;
      background-color: orange;
      border-radius: 50%;
      line-height: 100px;
      text-align: center;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <section>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>10</span>
  </section>

  <!-- 
    什么是弹性盒子？
      CSS 弹性盒子，也称为 Flexbox，是一种强大的 CSS 布局模型，旨在提供一种更有效的方式来对容器中的子元素进行排列、对齐和分配空白空间。它特别适用于需要适应不同屏幕尺寸和设备的布局。

    为什么使用弹性盒子？
      灵活性： 子元素可以自动调整大小以适应容器，无需繁琐的计算。
      响应式布局： 弹性盒子使得布局能够轻松适应不同屏幕尺寸。
      对齐方式多样： 提供了多种方式来对齐子元素，无论是水平还是垂直方向。
      简化布局： 相比传统的浮动和定位，弹性盒子语法更简洁直观。
  
    弹性盒子模型主要由两部分组成：
      弹性容器（Flex Container）： 包含所有弹性子元素的容器。
      弹性子元素（Flex Item）： 容器内的子元素。
  -->
  



  <!-- 
    一. 给容器添加的属性
      1. display 
        flex
        inline-flex

      2. flex-direction 设置弹性盒的主轴的方向(默认子元素的排列的方向)
        row: 从左往右(默认值)
        row-reverse: 从右往左
        column: 从上往下
        column-reverse: 从下往上

      3. justify-content 控制子元素在主轴的排列方式
        flex-start: 主轴的开始位置排列(默认值)
        center: 主轴的居中位置排列
        flex-end: 主轴的结束位置排列
        space-around: 子元素会平分剩余的空间(两边的距离是中间的一半)
        space-between: 子元素会平分剩余的空间(两边的距离是0)
        space-evenly: 子元素会平分剩余的空间(两边的距离和中间一样)

      4. align-items 交叉轴(侧轴,和主轴垂直的那个轴)的排列方式
        flex-start: 交叉轴的开始位置排列
        center: 交叉轴的居中位置排列
        flex-end: 交叉轴的结束位置排列
        stretch: (默认值)如果子元素有高度，效果和flex-start是一样的。如果没有高度，那么子元素的高度默认和父元素一样。(主轴是左右的看高度，主轴是上下的看宽度)

      5. flex-wrap 控制里面的子元素是否换行
        no-wrap: 不换行
        wrap：换行
        wrap-reverse: 换行，并且反转了交叉轴的方向

      6. align-content 控制行与行之间的排列方式
        flex-start: 交叉轴的开始位置排列
        center: 交叉轴的居中位置排列
        flex-end: 交叉轴的结束位置排列
        space-around: 子元素会平分剩余的空间(两边的距离是中间的一半)
        space-between: 子元素会平分剩余的空间(两边的距离是0)
        space-evenly: 子元素会平分剩余的空间(两边的距离和中间一样)



    二. 给子元素添加的属性
  
  -->
</body>
</html>